<template>
  <div  class="comment">
    <loading style="margin: 10% auto" v-if="loadingShow"></loading>
    <div v-else style="width: 100%">
      <div class="comment-top">
        <h4>{{commentNum}}条评论</h4>
        <div class="switch">
          <img src="../../../assets/svg/sort.svg" alt="">
          <p @click="sortSwitch()">{{sortType=='hot'?'切换为时间排序':'切换为热度排序'}} </p>
        </div>
      </div>
      <div class="comment-list" >
        <h4 style="margin-top: 50px;color: #8590A6" v-if="comments.length==0">空空如也~快来评论吧~~</h4>
        <div v-else v-for="item in comments" :key="item.id">
          <acomment :dynamic="dynamic" :comment="item" v-if="$store.getters['comment/getCoMap'][item.uid+'_'+item.type]" :likeList="likeCommentCIds" :secondComment="secondComments"></acomment>
        </div>
      </div>
    </div>
    <div class="add-comment">
      <el-input class="add-input"  v-model="newComment.context" placeholder="留下你想说的~" ></el-input>
      <el-button class="add-btn" @click="addComments"  type="primary">发布</el-button>
    </div>
  </div>
</template>

<script>
import Acomment from "@/components/content/Acomment";
import {addComment, getComments} from "@/api/dynamic"
import Loading from "@/components/conmmon/Loading";
export default {
  name: "Comment-2",
  components: {Loading, Acomment},
  props:['dynamic','commentNum'],
  created() {
    this.getData()
  },
  data(){
    return{
      sortType:'hot',
      loadingShow:true,
      otherComment:false,
      userProfileShow:false,
      isReply:-1,     //通过index的值来确定哪个的回复框的h展开的
      isOpen:-1,      //通过index确定展开回复对象
      replyName:'',
      replyContext:'',
      newComment:{
        context:'',
        did:this.dynamic.id,
        type:this.$store.getters["user/getUser"].uType,
        uid:this.$store.getters["user/getUser"].uid
      },
      unitMap:[],   //评论者信息
      comments:[],
      secondComments:{},
      likeCommentCIds:[]
    }
  },
  methods:{
    sortSwitch(){
      this.sortType=this.sortType=='hot'?
          'time':'hot'
      this.getData()
    },
    getData(){
      getComments(this.dynamic.id,this.sortType)
          .then(res=>{
            let {extend}=res.data
            this.comments=extend.firstComments
            this.likeCommentCIds=extend.likeCommentCIds
            if(this.comments.length==0){
              this.otherComment=true
            }else {
              this.otherComment=false
              this.secondComments=extend.secondComments
              // this.unitMap=extend.unitMap
              this.$store.commit("comment/SET_COMMENTMAP",extend.unitMap)
            }
            setTimeout(()=>{
              this.loadingShow=false
            },200)
          })
    },
    addComments(){
      if(this.newComment.context.length!==0){
        addComment(this.newComment).then(()=>{
          this.getData()
          this.newComment.context=''
        })
      }else {
        return
      }

    }
  }
}
</script>

<style lang="stylus" scoped>
@keyframes btn
  0%
    width 1%
  100%
    width 11%
.add-btn
  animation btn .3s ease-in .3s
.add-input
  width 88%
  &:focus
    width 100%
.comment
  justify-content space-between
  margin 5px
  box-sizing border-box
  display flex
  flex-direction column
  align-items center
  z-index 5
  width 100%
  height auto
  min-height 140px
  box-shadow 0 0 4px rgb(222, 218, 218)
  background-color white
.comment-top
  padding 10px
  width 100%
  height 40px
  display flex
  justify-content space-between
  align-items center
  border-bottom 1px solid rgb(247,247,247)
.switch
  color #bfbfbf
  width 30%
  height 100%
  display flex
  align-items center
  justify-content flex-end
  cursor pointer
  & img
    height 100%
.comment-list
  padding 0 10px
  width 100%
  min-height 130px
  height auto
  & h4
    display flex
    justify-content center
.add-comment
  display flex
  align-items center
  justify-content space-between
  width 100%
  height 60px
  padding 0 10px
  border-top 1px solid #e5dbdb
</style>
